<template>
  <div class="page">
    <view class="top">
      <view class="top_content">
        <image
          class="top_content_bgk"
          src="/static/img/home/top_bgk.png"
          mode="scaleToFill"
        ></image>
        <u-navbar bgColor="#fff0" leftIcon=" ">
          <view class="search_box" slot="center">
            <image
              class="logo"
              src="/static/img/home/logo.png"
              mode="aspectFit"
            ></image>
            <view class="input_wrapper" slot="center">
              <image
                class="search_icon"
                src="/static/img/home/search.png"
                mode="aspectFit"
              ></image>
            </view>
          </view>
        </u-navbar>
        <view class="button">
          <view class="button_item">
            <image
              class="button_item_icon"
              src="/static/img/home/point_icon.png"
              mode="aspectFit"
            ></image>
            <text class="button_item_text">领积分</text>
          </view>
          <view class="button_item">
            <image
              class="button_item_icon"
              src="/static/img/home/pay_qr.png"
              mode="aspectFit"
            ></image>
            <text class="button_item_text">付款码</text>
          </view>
          <view class="button_item">
            <image
              class="button_item_icon"
              src="/static/img/home/scan_icon.png"
              mode="aspectFit"
            ></image>
            <text class="button_item_text">扫一扫</text>
          </view>
        </view>
      </view>
      <view class="top_banner">
        <u-swiper
          :list="list1"
          :height="200"
          :autoplay="list1.length > 1"
          indicator
          style="border-radius: 30px"
          radius="10"
          @click="swiperHandle"
        ></u-swiper>
      </view>
    </view>
    <view class="sign">
      <view class="sign_header">
        <view
          >本月累计签到
          <text
            style="
              color: #3275fa;
              font-size: 34rpx;
              font-weight: bold;
              margin: 0 2px;
            "
            >{{ signInfo.signInDays }}</text
          >天</view
        >
        <!-- <view style="display: flex; flex-direction: row; align-items: center">
          <view style="margin-right: 8px" @click="change2">
            <u-icon name="volume-off" size="18" v-if="checked != '1'"></u-icon>
            <u-icon name="volume" size="18" v-else></u-icon>
          </view>
          <image
            @click="signCalendarHandle"
            src="../../static/img/icon_rili.png"
            style="width: 17px; height: 17px; margin-right: 16px"
          ></image>
          <view
            class="signView2"
            style="margin-right: 32rpx"
            @click="signHandle"
            >{{ signInfo.isSignIn == '1' ? '已签到' : '签到' }}</view
          >
        </view> -->
        <view class="sign_header_btn">签到</view>
      </view>
      <view class="sign_body">
        <view class="sign_card" v-for="(item, index) in signList" :key="index">
          <view style="display: flex; align-items: center">
            <view class="redPacketImgView">
              <image
                :src="
                  item.checkStatus == '1'
                    ? '../../static/img/red_packet_open.png'
                    : '../../static/img/red_packet_close.png'
                "
                class="redPacketImg"
              ></image>
              <view
                :class="[
                  'redPacketNum',
                  item.checkStatus == '1'
                    ? 'redPacketNumSel'
                    : 'redPacketNumNor',
                ]"
                >+{{ item.ruleSettings }}</view
              >
            </view>
            <view
              :class="[
                'redPacketRightLine',
                item.checkStatus == '1'
                  ? 'redPacketRightLineSel'
                  : 'redPacketRightLineNor',
              ]"
              v-if="index + 1 != signList.length"
            ></view>
          </view>
          <view class="redPacketTitle">{{
            item.checkStatus == '1' ? '已领取' : '第' + (index + 1) + '天'
          }}</view>
        </view>
      </view>
    </view>
    <view class="function">
      <view class="function_title"> 功能 </view>
      <view class="function_list">
        <view
          class="function_list_item"
          v-for="item in functionList"
          :key="item.name"
        >
          <image
            class="function_list_item_icon"
            :src="item.icon"
            mode="aspectFit"
          ></image>
          <text class="function_list_item_text">{{ item.name }}</text>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import noti from '@/api/noti.js'
import news from '@/api/news.js'
import swiper from '@/api/swiper.js'
import mine from '@/api/mine.js'
export default {
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: 0, //this.$statusBarHeight
      TopHeight: 0,
      currentTab: 0,
      searchValue: '',
      pageNo: 1,
      pageSize: 5,
      userInfo: {},
      userInfo2: {},
      shadowStyle: {
        backgroundImage: 'none',
        paddingTop: '0',
        marginTop: '20rpx',
        marginBottom: '20rpx',
      },
      list1: [],
      indexList: [1, 2, 3, 4, 5],
      dataList: [],
      swiperList: [],
      list2: [
        {
          name: '/static/img/home_jiayuanfengqing.png',
          title: '嘉园风情',
        },
        {
          name: '/static/img/icon_hjwenhua.png',
          title: '航嘉文化',
        },
        {
          name: '/static/img/home_hangjiaxingzheng.png',
          title: '航嘉行政',
        },
        {
          name: '/static/img/home_jiaruzhaopin.png',
          title: '航嘉招聘',
        },
      ],
      list3: [
        {
          name: '通知公告',
        },
        {
          name: '新闻动态',
        },
      ],
      functionList: [
        {
          name: '内部推荐',
          icon: '/static/img/home/icon_tuijian.png',
        },
        {
          name: '信息认证',
          icon: '/static/img/home/icon_renzheng.png',
        },
        {
          name: '工时查询',
          icon: '/static/img/home/icon_gongshi.png',
        },
        {
          name: '工资查询',
          icon: '/static/img/home/icon_gongzi.png',
        },
        {
          name: '员工手册',
          icon: '/static/img/home/icon_shouce.png',
        },
        {
          name: '意见反馈',
          icon: '/static/img/home/icon_yijian.png',
        },
      ],
      signList: [],
    }
  },
  mounted() {
    uni.getSystemInfo({
      success: (e) => {
        this.StatusBar = e.statusBarHeight
        let custom = wx.getMenuButtonBoundingClientRect()
        this.CustomBar = custom.bottom + custom.top - e.statusBarHeight
        this.TopHeight = this.CustomBar + 5 //this.StatusBar+this.CustomBar;
      },
    })
    this.swiperListRequest()
  },
  onShareAppMessage() {
    return {
      title: '魅力嘉园2',
      path: '/pages/home/home',
      success(res) {
        console.log('分享成功', res)
      },
      fail(err) {
        console.error('分享失败', err)
      },
    }
  },
  onShareTimeline() {
    return {
      title: '魅力嘉园',
    }
  },
  onShow() {
    this.initUserInfo()
  },
  onLoad(options) {},
  beforeDestroy() {
    console.log('页面即将销毁')
  },
  destroyed() {
    console.log('页面已销毁')
  },
  onUnload() {
    console.log('页面卸载')
  },
  methods: {
    initUserInfo() {
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo)
      }
      if (Object.keys(this.userInfo).length > 0) {
        this.getSignList()
        this.getUserHandle()
      }
    },
    getUserHandle() {
      mine
        .getUserHandle({
          id: this.userInfo.id,
        })
        .then((res) => {
          this.userInfo2 = res
        })
        .catch((err) => {})
    },
    searchHandle() {
      this.requestHandle()
    },
    swiperHandle() {
      return
      uni.previewImage({
        indicator: 'none',
        loop: false,
        urls: this.list1,
      })
    },
    loadMoreHandle(item) {
      let urlStr =
        '/packageHome/pages/homeDetail/index?id=' +
        item.id +
        '&type=' +
        this.currentTab
      if (this.currentTab == 0) {
        urlStr =
          '/packageHome/pages/homeDetail/index3?id=' +
          item.id +
          '&type=' +
          this.currentTab
      }
      uni.navigateTo({
        url: urlStr,
      })
    },
    swiperListRequest() {
      swiper
        .listHandle({})
        .then((res) => {
          console.log(res, 'res')
          let records = res.records
          let swipList = []
          if (Array.isArray(records) && records.length > 0) {
            for (let i = 0; i < records.length; i++) {
              swipList.push(records[i]['url'])
            }
          }
          if (swipList.length > 0) {
            this.list1 = swipList
          }
        })
        .catch((err) => {})
    },
    queryList(pageNo, pageSize) {
      this.pageNo = pageNo
      this.pageSize = pageSize
      this.requestHandle()
    },
    requestHandle() {
      if (this.currentTab == 0) {
        noti
          .listHandle({
            page: this.pageNo,
            size: this.pageSize,
            theme: this.searchValue,
          })
          .then((res) => {
            let records = res.records
            if (this.pageNo == 1) {
              this.dataList = records
            } else {
              this.dataList.concat(records)
            }
            this.$refs.paging.complete(res.records)
          })
          .catch((error) => {
            this.$refs.paging.complete(false)
          })
      } else {
        news
          .listHandle({
            page: this.pageNo,
            size: this.pageSize,
            theme: this.searchValue,
          })
          .then((res) => {
            let records = res.records
            if (this.pageNo == 1) {
              this.dataList = records
            } else {
              this.dataList.concat(records)
            }
            this.$refs.paging.complete(records)
          })
          .catch((error) => {
            this.$refs.paging.complete(false)
          })
      }
    },
    tabClick(value) {
      this.currentTab = value //.index;
      this.dataList = []
      this.$refs.paging.reload()
    },
    topHandle(value) {
      switch (value) {
        case 0: //嘉园风情
          uni.navigateTo({
            url: '/packageHome/pages/carbonNeutrality/index?carbonType=0',
          })
          break
        case 1: //双碳文化
          uni.navigateTo({
            url: '/packageHome/pages/carbonNeutrality/index?carbonType=1',
          })
          break
        case 2: //航嘉行政
          if (
            Object.keys(this.userInfo2).length > 0 &&
            this.userInfo2.dutyStatus != 2
          ) {
            uni.showModal({
              title: '请先完成实名认证，是否去认证？',
              complete: (res) => {
                // console.log(res)
                if (res.confirm) {
                  uni.navigateTo({
                    url: '/pageageMine/pages/completeInfo',
                  })
                }
              },
            })
          } else {
            uni.navigateTo({
              url: '/packageHome/pages/jiahangxingzheng/index',
            })
          }
          break
        case 3: //加入招聘
          uni.navigateTo({
            url: '/packageHome/pages/recruit/index',
          })
          break
        default:
          break
      }
    },
    async getSignList() {
      const res = await mine.listHandle()
      this.signList = res || []
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #f0f2f5;
}

.top {
  position: relative;
  width: 100vw;
  height: 670rpx;
  border-bottom-left-radius: 58rpx;
  border-bottom-right-radius: 58rpx;
  overflow: hidden;

  .top_content {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 520rpx;

    &_bgk {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
    }
  }

  .top_banner {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 312rpx;
  }
}

.logo {
  position: absolute;
  left: -60rpx;
  width: 75rpx;
  height: 75rpx;
}

.search_box {
  position: relative;
  left: -30rpx;
  width: 500rpx;
  padding-left: 32rpx;
  display: flex;
  align-items: center;

  .input_wrapper {
    padding-left: 10rpx;
    display: flex;
    align-items: center;
    width: 410rpx;
    height: 62rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(41, 116, 249, 0.08);
    border-radius: 32rpx;

    .search_icon {
      width: 54rpx;
      height: 54rpx;
    }
  }
}

.button {
  margin-top: 100px;
  padding: 60rpx 99rpx;
  display: flex;
  justify-content: space-between;

  &_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &_icon {
      width: 62rpx;
      height: 62rpx;
    }

    &_text {
      margin-top: 15rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #fff;
    }
  }
}

.function {
  margin: 32rpx;
  padding: 32rpx;
  box-sizing: border-box;
  background: #ffffff;
  border: 2rpx solid #ffffff;
  box-shadow: 0rpx 2rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 24rpx;
  &_title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 34rpx;
    color: #313742;
    line-height: 48rpx;
  }

  &_list {
    margin-top: 32rpx;
    display: flex;
    flex-wrap: wrap;
    &_item {
      margin-right: 68rpx;
      width: 104rpx;
      margin-bottom: 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      &:nth-child(4) {
        margin-right: 0;
      }

      &_icon {
        width: 94rpx;
        height: 94rpx;
      }

      &_text {
        margin-top: 6rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #313742;
        line-height: 37rpx;
      }
    }
  }
}
.sign {
  margin: 32rpx;
  background-color: white;
  border-radius: 10px;
  padding: 24rpx;
  box-sizing: border-box;
  background: #ffffff;
  border: 2rpx solid #ffffff;
  box-shadow: 0rpx 2rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 24rpx;
  &_header {
    margin-bottom: 30rpx;
    padding: 0 8rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 34rpx;
    color: #313742;
    &_btn {
      padding: 8rpx 38rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      background: linear-gradient(
          270deg,
          rgba(255, 106, 14, 0.65) 0%,
          #fa5c62 100%
        ),
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.2) 0%,
          rgba(255, 255, 255, 0) 100%
        );
      border-radius: 27rpx;
    }
  }
  &_body {
    display: flex;
    flex-direction: row;
    .sign_card {
      display: flex;
      flex-direction: column;
    }
    .redPacketImg {
      width: 52rpx;
      height: 63rpx;
      // position: absolute;
      top: 5px;
      left: 0;
      margin-left: 3px;
    }
    .redPacketImgView {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: -3px;
    }
    .redPacketNum {
      position: absolute;
      top: 0;
      margin-top: 2px;
      margin-left: 2px;
      color: #e79e5c;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .redPacketNumSel {
      color: #e79e5c;
    }
    .redPacketNumNor {
      color: #ffe951;
    }
    .redPacketTitle {
      color: #98a0b3;
      font-size: 22rpx;
      margin-top: 15rpx;
    }
    .redPacketRightLine {
      width: 46rpx;
      height: 10rpx;
    }
    .redPacketRightLineNor {
      background-color: #dcdfe6;
    }
    .redPacketRightLineSel {
      background: linear-gradient(180deg, #ff8085 0%, #fa5c62 100%);
    }
  }
}
</style>
